<script setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(95, window.innerWidth / window.innerHeight, 0.1, 1000);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//添加立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 8;
// camera.position.x = 5;
// camera.position.y = 5;

//创建一个坐标轴
function createAxes () {
  //参数：坐标轴长度
  const axesHelper = new THREE.AxesHelper(5)
  //坐标轴也是一个物体需要加入到场景中使用(特殊)
  //物体虽然试几何图形+材质皮肤决定，坐标轴构造函数里决定好线段图形和颜色
  scene.add(axesHelper)
}
//调用创建坐标轴
createAxes()

//创建轨道控制器
//轨道控制器（控制摄像机位置 ）
let controls
function createOrbit () {
  controls = new OrbitControls(camera, renderer.domElement)
  controls.update()
}
function animate () {
  requestAnimationFrame(animate)
  controls.update();
  renderer.render(scene, camera)
}
createOrbit()
animate()

//适配画布大小
function resize () {
  window.addEventListener('resize', () => {
    renderer.setSize(window.innerWidth, window.innerHeight)
    //重新根据响应改变物体的宽高比
    camera.aspect = window.innerWidth / window.innerHeight
    //更新摄像机矩阵空间(让摄像机重新计算每个像素点位置和大小)
    camera.updateProjectionMatrix()
  })
}
resize()

renderer.render(scene, camera)


</script>

<template></template>

<style scoped>
</style>
